<template>
  <div v-if="type === 'point'" class="MyStatus flex items-center gap-x-6">
    <div
      class="h-6 w-6 b-rd-50%"
      :style="{ background: customColor || result[colorKey] || '#000' }"
    ></div>
    <div class="font-size-14 color-#3A3E45 font-400">{{ result[labelKey] || '未知' }}</div>
  </div>
  <div
    v-if="type === 'card'"
    class="MyStatus h-22 rounded-11 px-10 font-size-14 color-#3A3E45 lh-24"
    :style="{ background: customColor || result[colorKey] }"
  >
    {{ result[labelKey] || '未知' }}
  </div>
</template>

<script setup lang="jsx">
defineOptions({ name: 'MyStatus' })
const props = defineProps({
  type: {
    type: String,
    default: 'point',
  },
  value: {
    type: [String, Number],
    default: '',
  },
  labelKey: {
    type: String,
    default: 'name',
  },
  valueKey: {
    type: String,
    default: 'code',
  },
  colorKey: {
    type: String,
    default: 'color',
  },
  options: {
    type: Array,
    default: () => [],
  },
  customColor: {
    type: String,
    default: '',
  },
})
const result = computed(() => {
  return props.options.find((item) => `${item[props.valueKey]}` === `${props.value}`) || {}
})
</script>

<style lang="scss" scoped>
.MyStatus {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
